<!DOCTYPE html>
<html>
<head>
    <title>socket.io 聊天室</title>
    <meta charset="utf-8">

    <link rel="stylesheet" href="./stylesheets/reset.css"/>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./stylesheets/app.css"/>
</head>
<body>
	<div class="container" style="width:100%;height:100%; font-size:12px;">
	   <div class="row clearfix">
			<div class="col-md-12 column">
				<ul class="nav nav-tabs">
					<li class="active">
						 <a href="./chat">聊天室</a>
					</li>
					<li>
						 <a href="./help">帮助</a>
					</li>
					<li>
						 <a href="./about">关于</a>
					</li>
				</ul>
	        </div>
	    </div>
	    <div class="wrapper">
	         <div class="content" id="chat">
	             <ul id="chat_conatiner">
	             </ul>

	         </div>
	         <div class="action">
	             <textarea ></textarea>
	             <button class="btn btn-success" id="clear">清屏</button>
	             <button class="btn btn-success" id="send">发送</button>
				 <button class="btn btn-success" id="readdfile">读目录文件</button>
				 <button class="btn btn-success" id="readbfile">读二进制文件</button>
				 <button class="btn btn-success" id="selectaid">选应用(AID)</button>
				 <button class="btn btn-success" id="selectsfi">选应用(SFI)</button>
	         </div>
     </div>
	</div>
	
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">

          function getTime(){
			  var date = new Date();
			  var out ='';
			  var yy  =  date.getYear()+1900;
			  var MM  =  date.getMonth()+1;
			  var dd  =  date.getDate();

			  var hh  = date.getHours();
			  var mm = date.getMinutes();
			  var ss = date.getSeconds();
			  out =  yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
			  return out;
		  }
		  var namebuf =['唐僧','悟空','八戒','沙和尚','哪吒','牛魔王','铁扇公主','白骨精','蛇妖','龙王','观音','黑山老妖',
		                '张无忌','周芷若','赵敏','乔峰','王语嫣','阿朱','阿紫','法海','小青','白素贞','宁采臣','小倩'];
		  
		  
		  var ws =  io();
          var sendMsg = function(msg){
              ws.emit('send.message', msg);
          }
          var addMessage = function(from, msg){
              var li = document.createElement('li');
              li.innerHTML = '<span>' + from + ' '+getTime()+'</span>' +' : ' + '<br>'+msg;
              document.querySelector('#chat_conatiner').appendChild(li);

              // 设置内容区的滚动条到底部
              document.querySelector('#chat').scrollTop = document.querySelector('#chat').scrollHeight;

              // 并设置焦点
              document.querySelector('textarea').focus();

          }

          var send = function(){
              var ele_msg = document.querySelector('textarea');
              var msg = ele_msg.value.replace('\r\n', '').trim();
              console.log(msg);
              if(!msg) return;
              sendMsg(msg);
              // 添加消息到自己的内容区
              addMessage('我', msg);
              //ele_msg.value = '';
          }

          ws.on('connect', function(){
             
			  var n =Math.floor(Math.random() * ( 23 + 1));
			  var nickname = namebuf[n];
			  
              ws.emit('join', nickname);
          });

          ws.on('send.message', function(from, msg){
              addMessage(from, msg);
          });

          ws.on('announcement', function(from, msg){
              addMessage(from, msg);
          });

          document.querySelector('textarea').addEventListener('keypress', function(event){
              if(event.which == 13){
                  send();
              }
          });
          document.querySelector('textarea').addEventListener('keydown', function(event){
              if(event.which == 13){
                  send();
              }
          });
          document.querySelector('#send').addEventListener('click', function(){
              send();
          });

          document.querySelector('#clear').addEventListener('click', function(){
              document.querySelector('#chat_conatiner').innerHTML = '';
          });
		  
		  document.querySelector('#selectsfi').addEventListener('click', function(){
		  
			  var msg = document.querySelector('textarea');
			  var name=prompt("请输入应用名(SFI)","3F00,0");
			  if(name){
				//msg.value = name;
				var str = name.split(',');
				msg.value = "fun selSFI(" + "\""+ name +"\""+ ")";
				if( str.length > 1){
					msg.value = "fun selSFI(" + "\""+ str[0] +"\","+ str[1]+ ")";
				}
				send();
			  }
          });
		  
		  document.querySelector('#selectaid').addEventListener('click', function(){
		  
			  var msg = document.querySelector('textarea');
			  var name=prompt("请输入应用名(AID)","1PAY.SYS.DDF01,0");
			  if(name){
				//msg.value = name;
				var str = name.split(',');
				msg.value = "fun selAID(" + "\""+ name +"\""+ ")";
				if( str.length > 1){
					msg.value = "fun selAID(" + "\""+ str[0] +"\","+ str[1]+ ")";
				}
			  }
          });
		  
		  document.querySelector('#readbfile').addEventListener('click', function(){
		  
			var msg = document.querySelector('textarea');
			  var name=prompt("请输入文件名(AID)","21,0,0,0");
			  if(name){
				//msg.value = name;
				var str = name.split(',');
				if( str.length > 1){
					//msg.value = "fun readBF(str[0] + ","+ str[1]+","+;
				}
			  }
          });
		
    </script>
</body>
</html>